import { Component, Prop, Vue } from 'vue-property-decorator'
import styles from './SealStatus.less'

export const statusList = [
  { key: 1, color: '#1890FF', text: '未提交' },
  { key: 29, color: '#1890FF', text: '待统付方审核' },
  { key: 2, color: '#1890FF', text: '待审核' },
  { key: 3, color: '#1890FF', text: '待制章' },
  { key: 90, color: '#F5222D', text: '已退回' },
  { key: 93, color: '#F5222D', text: '统付方退回' },
  { key: 25, color: '#1890FF', text: '待制证' },
  { key: 4, color: '#1890FF', text: '待制证' },
  { key: 5, color: '#1890FF', text: '待备案' },
  { key: 6, color: '#1890FF', text: '待备案' },
  { key: 26, color: '#1890FF', text: '待支付' },
  { key: 27, color: '#1890FF', text: '待发货' },
  { key: 28, color: '#1890FF', text: '待收货' },
  { key: 7, color: '#1890FF', text: '待发布' },
  { key: 24, color: '#1890FF', text: '补发完成' },
  { key: 8, color: '#52C41A', text: '完成' },
  { key: 9, color: '#F5A623', text: '已挂失' },
  { key: 10, color: '#F5A623', text: '已吊销' },
  { key: 12, color: '#F5222D', text: '已撤回' },
]

export const issueList = [
  { key: 1, color: '#52C41A', text: '已发布' },
  { key: 2, color: '#BFBFBF', text: '已挂失' },
  { key: 3, color: '#BFBFBF', text: '已吊销' },
  { key: 4, color: '#BFBFBF', text: '已过期' },
]

@Component({})
export default class SealStatus extends Vue {
  @Prop({}) private status!: number
  @Prop({}) private statusData!: { color: string; text: string }
  @Prop({ default: false }) issue!: boolean
  private get getColor() {
    if (this.statusData) {
      return {
        color: this.statusData.color,
        text: this.statusData.text,
      }
    }

    return (
      ((this.issue ? issueList : statusList).filter(
        (status: any) => status.key === this.status
      ) || [])[0] || {
        color: '#BFBFBF',
        text: '未知状态',
      }
    )
  }
  protected render(h: any) {
    return (
      <div class={styles.status}>
        <p class={styles.icon} style={{ background: this.getColor.color }} />{' '}
        <span>{this.getColor.text}</span>
      </div>
    )
  }
}
